<template>
  <div class="uplaodBoxs page-miH page-bgBack">
    <rTitle :type="'back'" :tit="'导入员工数据'" />
    <div class="steps">
      <a-steps :current="current">
        <a-step v-for="item in steps" :key="item.title" :title="item.title" />
      </a-steps>
    </div>
    <upload v-if="current === 0" @onAction="onAction" />
    <preview v-if="current === 1" :talentPoolTempId="talentPoolTempId" @onAction="onAction" @onActionS="onActionS" />
    <results v-if="current === 2" :status="status" :rdata="rdata" @onAction="onAction" />
  </div>
</template>
<script>
import rTitle from "../../component/rTitle";
import upload from "./component/upload";
import preview from "./component/preview";
import results from "./component/results";

export default {
  components: {
    rTitle,
    upload,
    preview,
    results
  },
  data() {
    return {
      current: 0,
      steps: [
        {
          title: "上传文件"
        },
        {
          title: "数据预览"
        },
        {
          title: "查看结果"
        }
      ],
      status: false,
      rdata: "",
      talentPoolTempId: ""
    };
  },
  created() {
    if (this.$store.state.recruitment.talentPoolTempId) {
      this.current = 1;
      this.talentPoolTempId = this.$store.state.recruitment.talentPoolTempId;
    }
  },
  methods: {
    onAction(e, id) {
      this.current = e;
      if (id) {
        this.talentPoolTempId = id;
      }
    },
    onActionS(e, status, data) {
      this.current = e;
      this.status = status;
      this.rdata = data;
    }
  }
};
</script>
<style lang="scss" scoped>
.uplaodBoxs {
  padding-bottom: 24px;
  .steps {
    height: 112px;
    box-shadow: 0px 4px 12px 0px rgba(106, 102, 246, 0.1);
    border-radius: 4px;
    margin: 24px;
    padding: 40px 186px;
    box-sizing: border-box;
  }
}
</style>
